<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>33-Vue组件-动态组件</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="toggle">组件切换</button>
  <keep-alive>
    <component v-bind:is="name"></component>
  </keep-alive>
</div>
<template id="home">
  <div>
    <p>组件首页 </p>
    <input type="checkbox"/>
  </div>
</template>
<template id="photo">
  <img width="200px" src="images/bg.jpg"/>
</template>
</body>
<script>
  <!-- 自定义全局组件 -->
  Vue.component("home", {
    template: '#home'
  })

  Vue.component("photo", {
    template: '#photo'
  })

  /* 1. 创建 vue 实例对象 */
  let vm1 = new Vue({
    // 2. 声明vue的实例对象控制页面的哪个区域
    el: '#app',
    // 3. 声明vue控制区域可以使用的数据
    data() {
      return {
        isShow: true,
        name: 'home'
      }
    },
    methods: {
      toggle() {
        this.isShow = !this.isShow
        this.name = this.name === 'home' ? 'photo' : 'home'
      }
    }
  })
</script>
</html>
<!--
1. 什么是动态组件
通过v-if/v-else-if/v-else确实能够切换组件，但是在Vue中切换组件还有一种更专业的方式
<component v-bind:is="需要显示的组件名称"></component>
component 我们称之为动态组件，也就是可以动态指定要显示的组件

2. 为什么需要动态组件？组件隐藏之前状态如何保存？
因为 component 可以配合 keep-alive 来保存被隐藏组件隐藏之前的状态
v-if 每次隐藏后显示都是重新创建
-->
